<template>
    <div class="playlist-container">
        <div class="top_wrap">
            <div class="img_wrap">
                <img :src="topPlaylist.coverImgUrl" alt="">
            </div>
            <div class="inof_wrap">
                <p>{{topPlaylist.name}}</p>
                <div class="inof_1">
                    <img :src="topPlaylist.creator.avatarUrl" alt="">
                    <span class="text">{{topPlaylist.creator.nickname}}</span>
                    <span class="time">{{topPlaylist.createTime}} 创建</span>
                </div>
                <div class="inof_2">
                    <span>标签:</span>
                    <ul>
                       <li v-for="(item,index) in topPlaylist.tags" :key="index">{{item}}</li>
                    </ul>
                </div>
                <div class="inof_3">
                  <span>简介: </span>
                  <span class="jianjie">{{topPlaylist.description}}</span>
                </div>
            </div>
        </div>
        <!--tabs标签页-->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="歌曲列表" name="first">
              <!--表格-->
                <el-table :data="playlist" style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column width="150">
                   <template slot-scope="scope">
                      <div class="img_box">
                       <img :src="scope.row.al.picUrl" alt="">
                       <p class="el-icon-caret-right" @click="playMuse(scope.row.id)"></p>
                      </div>
                   </template>
                </el-table-column>
                <el-table-column prop="name" label="音乐标题" width="350"></el-table-column>
                <el-table-column prop="ar[0].name" label="歌手" width="180"></el-table-column>
                <el-table-column prop="al.name" label="专辑" width="280"></el-table-column>
                <el-table-column label="时长">
                  <template slot-scope="scope">
                       {{scope.row.dt | formatDuration}}
                  </template>
                </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="'评论'+'('+(comTotal+hotTotal)*1+')'" name="second">
                 <div class="comment-wrap" v-if="hotTotal !=0">
                    <p> 最新评论 <span>({{hotTotal}})</span></p>
                    <div class="comments-wrap">
                       <div class="item" v-for="(item,index) in hotComments" :key="index">
                          <div class="ioc_wrap">
                             <img :src="item.user.avatarUrl" alt="">
                          </div>
                          <div class="text_wrap">
                            <!--评论-->
                              <div class="name">
                                 <span class="usename">{{item.user.nickname}}：</span>
                                 <span class="content">{{item.content}}</span>
                              </div>
                              <!--回复-->
                              <div class="txt_content" v-if="item.beReplied.length != 0">
                                  <span class="usename">{{item.beReplied[0].user.nickname}}</span>
                                  <span class="content">{{item.beReplied[0].content}}</span>
                              </div>
                              <div class="date">2020-07-11 11:10:02</div>
                          </div>
                       </div>                     
                    </div>
                 </div>

             <!--最热评论-->
                 <div class="comment-wrap" v-if="comTotal !=0">
                    <p> 最新评论 <span>({{comTotal}})</span></p>
                    <div class="comments-wrap">
                       <div class="item" v-for="(item,index) in comments" :key="index">
                          <div class="ioc_wrap">
                             <img :src="item.user.avatarUrl" alt="">
                          </div>
                          <div class="text_wrap">
                            <!--评论-->
                              <div class="name">
                                 <span class="usename">{{item.user.nickname}}：</span>
                                 <span class="content">{{item.content}}</span>
                              </div>
                              <!--回复-->
                              <div class="txt_content" v-if="item.beReplied.length != 0">
                                  <span class="usename">{{item.beReplied[0].user.nickname}}</span>
                                  <span class="content">{{item.beReplied[0].content}}</span>
                              </div>
                              <div class="date">2020-07-11 11:10:02</div>
                          </div>
                       </div>                     
                    </div>
                        <!-- 分页器 --> 
                    <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    :current-page="page"
                    :page-size="limit"
                    layout="prev, pager, next"
                    :total="comTotal">
                    </el-pagination>   
                 </div>             
            </el-tab-pane>
        </el-tabs>       
    </div>
</template>

<script>
export default {
     data () {
         return {
             //tabs标签页默认显示
            activeName:'first',
            //简介数据
            topPlaylist:{},
            //歌曲列表数据
            playlist:[],
            //最新评论数据
            hotComments:[],
            //最新评论条数
            hotTotal:0,
            //最热评论
            comments:[],
            //最热条数
            comTotal:0,
            //评论显示多少条
            limit:5,
            //默认页
            page:1,
         }
     },
     created() {
        this.getPlaylist() 
        this.getHotComments()
        this.getComments()
     },
     methods:{
        async getPlaylist () {
             const res = await this.$http.get('https://autumnfish.cn/playlist/detail',{params:{id:this.$route.query.id}})
            //   console.log(res)
                 if(res.data.code == 200){
                    this.topPlaylist = res.data.playlist
                    this.playlist = res.data.playlist.tracks
                    // console.log(this.playlist)
                 }
         },
         //tabs标签页改变时触发
        handleClick () {
           console.log( this.activeName)
        },
       async getHotComments () {
            const res = await this.$http.get('https://autumnfish.cn/comment/hot',{params:{id:this.$route.query.id,type:2}})
            // console.log(res)
              if(res.data.code == 200){
                 this.hotComments = res.data.hotComments
                 this.hotTotal = res.data.total
              }
        },
       async getComments () {
            const res = await this.$http.get('https://autumnfish.cn/comment/playlist',{params:{id:this.$route.query.id,limit:this.limit,offset:(this.page-1)*this.limit}})
              if(res.data.code == 200){
                  this.comments = res.data.comments
                  this.comTotal = res.data.total
                //   console.log(this.comments)
              }
        } ,
        handleCurrentChange (newPage) {
           this.page = newPage
           this.getComments()
        },
       async playMuse (id) {
           const res = await this.$http.get('https://autumnfish.cn/song/url',{params:{id}})
            let url = res.data.data[0].url
            this.$parent.url = url
        }
    }
 }
</script>

<style lang="less" scoped>
     .playlist-container{
         .top_wrap{
             margin-top: 35px;
             display: flex;
            .img_wrap{
                margin-right: 30px;
                img{
                     width: 230px;
                     height: 230px;
                }
            } 
           .inof_wrap{
              p{}
              .inof_1{
                  display: flex;
                  align-items: center;
                  margin-top: 20px;
                  img{
                      width: 35px;
                      height: 35px;
                      border-radius: 50%;
                      margin-right: 10px;
                  }
                  span{
                      margin-right: 10px;
                  }
                  .time{
                      font-size: 14px;
                  }
              } 
              .inof_2{
                  margin: 20px 0;
                  display: flex;
                  span{
                      font-size: 18px;
                      margin-right: 10px;
                  }
                   ul{
                       display: flex;
                       align-items: center;
                       li{
                           font-size: 14px;
                          span{
                              margin: 0 5px;
                          }
                       }
                   }                 
              } 
              .inof_3{
                  span{
                      font-size: 18px;
                  }
                  .jianjie{
                      font-size: 15px;
                  }
              } 
           } 
         }


         .comment-wrap{
             margin-bottom: 100px;
           p{
               margin-bottom: 20px;
           }
           .comments-wrap{
              .item{
                  margin-top: 30px;
                  display: flex;
                  width: 100%;
                 .ioc_wrap{
                     margin-right: 20px;
                     img{
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                     }
                 }
                 .text_wrap{
                     width: 100%;
                     .name{
                         .usename{
                                 color: #517eaf;
                                 font-size: 14px;
                         }
                         .content{}
                     }
                     .txt_content{
                             margin: 15px 0;
                             background-color: #e6e5e6;
                             width: 100%;
                             padding: 10px;
                         .usename{
                                 color: #517eaf;
                                 font-size: 14px;                             
                         }
                         .content{}                         
                     }
                     .date{
                         color: grey;
                         font-size: 14px;
                     }
                 } 
              } 
           }
         } 
         .el-tabs{
             .img_box{
                 position: relative;
                    width: 70px;
                    height: 70px;
                img{
                     width: 70px;
                    height: 70px;
                    border-radius: 5px;
               }
               p{  
                   position: absolute;
                   left: 50%;
                   top: 50%;
                   width: 25px;
                   height: 25px;
                   margin-left: -10px;
                   margin-top: -10px;
                   border-radius: 50%;
                   background: white;
                   font-size: 25px;
                   color: #dd6d60;
                   opacity: 0;
                   cursor: pointer;
               }
             }
             .img_box:hover p {
                 opacity: 1;
             }
         } 
     }
</style>